<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3d</title>
	<style>
		*{margin:0;padding: 0;list-style: none;}
		body{background: black}
		.box{width: 300px;height: 200px;
			border:1px solid gray;
			box-shadow: 0 0 10px white;
			padding: 100px;
			margin:200px auto;
			perspective-origin: right top;/*从box的右上边看 xyz*/
			perspective: 800px;/*视野高度*/

		}
		.box:hover ul{transform: rotateY(360deg);}
			.box ul{
				width: 300px;
				height: 200px;
				border:1px solid;
				position: relative;
				transform-style: preserve-3d;/*告诉浏览器这是3d*/
				transform-origin:center center -100px;/*盒子旋转基点*/

				transition: 5s;
			}
			.box ul li{
				width: 300px;
				height: 200px;
				position: absolute;
			}

		.box ul li:nth-child(1){
			top: -200px;
			background: red;
			opacity: 0.5;
			transform-origin: bottom; 
			transform: rotateX(90deg);
		}
		.box ul li:nth-child(2){
			top:200px;
			background: yellow;
			opacity: 0.5;
			transform-origin: top;
			transform: rotateX(-90deg);
		}
		.box ul li:nth-child(3){
			left: -200px;
			width: 200px;
			background: blue;
			opacity: 0.5;
			transform-origin: right;
			transform: rotateY(-90deg);
		}
		.box ul li:nth-child(4){
			left:300px;
			width: 200px;
			background: green;
			opacity: 0.5;
			transform-origin: left;
			transform: rotateY(90deg);
		}
		.box ul li:nth-child(5){
			
			background: khaki;
			opacity: 0.5;
		}
		.box ul li:nth-child(6){

			background: purple;
			opacity: 0.5;
			transform:translateZ(-200px);
		}

	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li>上</li>
			<li>下</li>
			<li>左</li>
			<li>右</li>
			<li>前</li>
			<li>后</li>
		</ul>
	</div>
</body>
</html>